<template>
  <div class="container">
    <div class="excalidraw" id="excalidraw"></div>
  </div>
</template>

<script>
import React from "react";
import { createRoot } from "react-dom/client";
import { Excalidraw } from "@excalidraw/excalidraw";

let root = null;
let app = null;
export default {
  data() {
    return {
      appState: {
        // 默认的 appState 配置
        viewBackgroundColor: "#fff", // 画布背景颜色
        currentItemStrokeColor: "#000000", // 当前绘画工具颜色
        currentItemBackgroundColor: "#ffffff", // 当前工具填充颜色
        activeTool: "selection", // 默认工具为选择工具
        zoom: 1, // 缩放比例
      },
    };
  },
  mounted() {
    // 组件挂载时恢复绘画数据和 appState
    this.initializeExcalidraw();
  },
  unmounted() {
    // 组件卸载时销毁 Excalidraw 实例
    if (root) {
      root.unmount();
    }
  },
  methods: {
    initializeExcalidraw() {
      const savedElements = localStorage.getItem("excalidrawElements");
      const savedAppState = localStorage.getItem("appState");

      const initialData = savedElements
        ? JSON.parse(savedElements)
        : { elements: [], appState: this.appState };
      const appState = savedAppState ? JSON.parse(savedAppState) : this.appState;

      const excalidrawElement = React.createElement(Excalidraw, {
        initialData: initialData,
        onChange: this.handleDrawingChange,
        excalidrawAPI: this.excalidrawAPI,
        langCode: "zh-CN",
      });

      root = createRoot(document.getElementById("excalidraw"));
      root.render(excalidrawElement);
    },

    handleDrawingChange(elements, newAppState) {
      let state = app.getAppState();

      let { collaborators, ...appState } = state;

      // delete state.collaborators;
      localStorage.setItem(
        "excalidrawElements",
        JSON.stringify({ elements, appState: appState })
      );
    },

    excalidrawAPI(e) {
      app = e;
      window.app = e;
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .header {
    height: 3rem;
    line-height: 3rem;
    padding: 0 1rem;
    font-size: 1.2rem;
    background-color: #038fe5;
    color: white;
  }

  .footer {
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    background-color: #038fe5;
    color: white;
  }

  .excalidraw {
    flex-grow: 1; /* 占满剩余空间 */
    height: 100%;
  }
}
</style>
